<!--发表博客页面-->
<template>
    <div class="order">
        <div style=" margin-bottom: 5px">

            <el-row :gutter="24" style="margin-left: 20px">
                <el-col :span="21">
                    <el-input
                            type="text"
                            placeholder="请输入内容"
                            maxlength="100"
                            show-word-limit
                            size="medium"
                            v-model="title"

                    >
                        <template slot="prepend">文章标题</template>
                    </el-input>

                </el-col>
                <el-col :span="3">
                    <el-button type="danger" plain class="button" @click="save">保存草稿</el-button>
                    <el-button type="danger" class="button">发布文章</el-button>
                </el-col>
            </el-row>


        </div>
        <client-only>
            <mavon-editor @imgAdd="imgAdd" @save="save" :toolbars="markdownOption" v-model="handbook"/>
        </client-only>
    </div>

</template>

<script>
    export default {
        name: "EditorBlog",
        data() {
            return {
                markdownOption: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: false, // 全屏编辑
                    readmodel: false, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    navigation: true, // 导航目录
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                handbook: "",
                title:""
            }

        },
        methods: {
            setShowFooter() {
                this.$store.commit('user/setShowFooter', false);
            },
            save(){
            },
            imgAdd(){
            }
        },
        mounted() {
            //添加离开时页面提示
            window.onbeforeunload=function(e){
                e.returnValue=("确定离开当前页面吗？");
            }
            this.$store.commit('user/setShowFooter', false);
        }
    }
</script>

<style scoped>
    .order {
        width: 100%;
        height: 100%;
        margin-top: 65px;
    }

    .markdown-body {
        height: 830px;
    }
    /deep/ .el-input__inner{
        height: 45px;/*改变输入框高度*/
    }
    .el-button--danger.is-plain{
        background: white;
    }
    .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
        color:#F56C6C;
        background:#fef0f0 ;
        border-color:#fbc4c4 ;
    }
    .button{
        margin-top: 7px;
    }
</style>